import React from 'react';
import styles from './index.less';
import { useState, useEffect } from 'react';
import { connect } from 'dva';
import VerifyPoints from './VerifyPoints';
import VerifySlide from './VerifySlide';

const Verify = props => {
  const closeBox = () => {
    const { dispatch } = props;
    dispatch({
      type: 'slider/change',
    });
  };

  const{imgSize,isShow} = props;
  return (
    // 蒙层
    <div className={styles.mask} style={{ display: isShow ? 'block' : 'none' }}>
      <div className={styles.verifybox} style={{ maxWidth: parseInt(imgSize.width) + 30 + 'px' }}>
        <div className={styles['verifybox-top']}>
          请完成安全验证
          <span className={styles['verifybox-close']} onClick={() => closeBox()}>
            <i className={`${styles['iconfont']} ${styles['icon-close']}`}></i>
          </span>
        </div>
        <div className={styles['verifybox-bottom']} style={{padding:'15px'}}>
          {/* 验证容器 */}
          <VerifySlide />
        </div>
      </div>
    </div>
  );
};

export default connect(({ slider }) => ({ ...slider}))(Verify);
